import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Card, Switch, Button, Modal, message, Popconfirm, Tag } from 'antd'
import AutoTable from '@/components/AutoTable'
import InitForm from '@/components/InitForm'
import { deleteclassify, classify, store } from '@/services/basic'
import { connect } from 'umi'
import { PlusOutlined } from '@ant-design/icons'

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input 

let defaultFields = {
    "name": {
        "value": null,
        "type": "input",
        "title": "公司类型",
        "name": [
            "name"
        ],
        "required": true
    },
    "code": {
        "value": null,
        "type": "input",
        "title": "公司类型编号",
        "name": [
            "code"
        ],
        "required": true
    },
    "remark": {
        "value": null,
        "type": "textarea",
        "title": "备注",
        "name": [
            "remark"
        ],
        "required": false,
        col: { span: 24 }
    },
    "taxs": {
        "value": [],
        "type": "table",
        "title": "税负率",
        "name": [
            "taxs"
        ],
        "required": false,
        "maxLength": 2,
        "columns": [
            {
                "title": "税率名称",
                "dataIndex": "industry",
                "key": "industry",
                "valueType": "select",
                "search": false,
                "request":()=> [
                    {
                        label: "名义税率",
                        value: "名义税率"
                    },
                    {
                        label: "实际税负率",
                        value: "实际税负率"
                    }
                ],
                "formItemProps": {
                    rules: [
                        {
                            required: true,
                            message: '此项是必填项',
                        }
                    ],
                },
            },
            {
                "title": "百分比",
                "dataIndex": "tax_rate",
                "key": "tax_rate",
                "valueType": "percent",
                "width": 160,
                "search": false,
                "formItemProps": {
                    rules: [
                        {
                            required: true,
                            message: '此项是必填项',
                        }
                    ],
                },
            },
            {
                title: '操作',
                valueType: 'option',
                width: 60,
                render: () => {
                    return null;
                }
            }
        ],
        "rowKey": "id",
        col: { span: 24 }
    }
}


function Customertype(props) {
    const [vs, cvs] = useState(false),//表单显/隐
        [fields, cf] = useState(defaultFields),
        [iftype, ciftype] = useState({});

    let actionRef = useRef(), ChildRef = null;
    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }
    const columns = [
        {
            "title": "公司类型",
            "dataIndex": "name",
            "key": "name",
            "search": false
        },
        {
            "title": "公司类型编号",
            "dataIndex": "code",
            "key": "code",
            "search": false
        },
        {
            "title": "备注",
            "dataIndex": "remark",
            "key": "remark",
            "search": false
        },
        {
            "title": "税负率%",
            "dataIndex": "tax_rates",
            "key": "tax_rates",
            "search": false,
            render: (_, record) => {
                return record.tax_rates && record.tax_rates.map(it => {
                    return <Tag key={it.id} style={{ marginRight: 4 }}>{it.industry} - {it.tax_rate}%</Tag>
                })
            }
        },
        {
            title: '操作',
            valueType: 'option',
            width: 100,
            render: (text, record, _, action) => [
                <a
                    style={{ color: "#1890ff" }}
                    onClick={() => {
                        cvs(true);
                        cf(fields => {
                            for (let i in fields) {
                                fields[i].value = record[i];
                                if (i == "taxs") {
                                    fields[i].value = record.tax_rates
                                }
                            }
                            return { ...fields }
                        });
                        ciftype({
                            val: "edit",
                            title: "编辑客户公司类型",
                            id: record.id
                        })
                    }}
                >
                    编辑
                </a>,
                <Popconfirm
                    placement="bottom"
                    title={"确认删除该客户公司类型？"}
                    onConfirm={() => {
                        deleteclassify(record.id).then(res => {
                            if (res.code == 0) {
                                message.success("操作成功");
                                reload();
                            }
                        })
                    }}
                    okText="删除"
                    cancelText="取消"
                >
                    <a style={{ color: "#f50" }}>
                        删除
                    </a>
                </Popconfirm>
                ,

            ],
        },
    ]

    let extrarender = ([
        <div className='action' title='新增' onClick={() => {
            cvs(true);
            cf(fields => {
                for (let i in fields) {
                    fields[i].value = null;
                }
                return { ...fields }
            });
            ciftype({
                val: "add",
                title: "新增客户公司类型"
            })
        }}>
            <PlusOutlined />
        </div>
    ])


    let saveData = (values) => {
        let { dispatch } = props;

        if (iftype.val == "add") {
            dispatch({
                type: 'basic/addclassify',
                payload: values
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })

        } else if (iftype.val == "edit") {
            dispatch({
                type: 'basic/editclassify',
                payload: { ...values, id: iftype.id }
            }).then(res => {
                if (res.code == 0) {
                    message.success("操作成功");
                    reload();
                    cvs(false)
                }
            })
        }


    }

    return (
        <div className="pgcontainer">
            <AutoTable
                pagetitle={props.route.name} //页面标题
                pageextra={extrarender} //页面操作 新增or批量删除
                columns={columns}
                actionRef={actionRef}
                onRef={node => ChildRef = node}
                path="/wbn-api/classify"
            //withCard={false} 
            //cardtitle = "name" //卡片标题
            //cardavatar = "img_url" //卡片头像
            ></AutoTable>
            <Modal
                maskClosable={false}
                title={iftype.title}
                open={vs}
                onCancel={() => cvs(false)}
                footer={false}
                width={1400}
                destroyOnClose={true}
            >
                <InitForm
                    fields={fields}
                    submitData={(values) => {
                        saveData(values)
                    }}
                    onChange={(changedValues, allValues) => {
                        //联动操作
                    }}
                    submitting={
                        props.loading.effects['basic/addclassify'] || !vs
                    }
                >
                </InitForm>


            </Modal>
        </div>
    )
}

export default connect(({ basic, loading }) => ({
    basic,
    loading,
}))(Customertype)